﻿@{
    ViewBag.Title = "Contact Us";
}

<div class="container">
    <div class="login-form-section">
    <div class="login-content bounceIn">
    <form role="form"  Style="margin: 0  auto;" id="email-form" action="">
      <h3 style="text-align:center;color:#3498db;">Contact Us</h3>
        <br />
        <div class="textbox-wrap">
        <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-user "></span>
        <div class="required-field-block">
            <input type="text" name="SenderName" id="sender-name" placeholder="Name" class="form-control" required />            
        </div>
        </div>
        </div>
        <div class="textbox-wrap">
        <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-envelope "></span>
        <div class="required-field-block">
            <input type="text" name="SenderAddress" id="sender-address" placeholder="Email" class="form-control" required />            
        </div>
        </div>
        </div>
        <div class="textbox-wrap">
        <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-phone "></span>
        <div class="required-field-block">
        <input type="text" id="yourphone" placeholder="Phone" class="form-control" required />
        </div>
        </div>
        </div>
        
        <div class="textbox-wrap">
        <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-comment "></span>
        <div class="required-field-block">
            <textarea rows="3" cols="1" name="Message" id="message" class="form-control" placeholder="Message" required></textarea>
            
        </div>
        </div>
        </div>

        <div class="login-form-action clearfix">
        <button id="send-button" value="Send" class="btn btn-success pull-right blue-btn">
        Send&nbsp; <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
        </div>
    </form>
    </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('.required-icon').tooltip({
            placement: 'left',
            title: 'Required field'
        });
    });

    $(function () {
        var form = $("#email-form");
        form.submit(function () {
            var emailData = {
                SenderName: $("#sender-name").val(),
                SenderAddress: $("#sender-address").val(),
                Message: $("#message").val(),
                yourphone: $("#yourphone").val(),
            };
            $.ajax({
                url: "/NepaliCorner/ContactUs",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(emailData),
                success: function (result) {
                    $("#sender-name").val(""),
                        $("#sender-address").val(""),
                        $("#message").val(""),
                        $("#yourphone").val(""); 
                        if(result.message == "success")
                        {
                            alert("Message Sent.");
                        } else if (result.message == "failure") {
                            alert("There was an error... please try again.");
                        } else {
                            alert(result.toString());
                        }
                },
                error: function () {
                    alert("There was an error... please try again.");
                }
            });
            return false;
        });
    });
</script>